<template>
  <div v-if="menuListLeft.length !==0">
      <q-drawer
        :mini="miniDrawer"
        content-class="border-right overflow-hidden min-width"
        :width="198"
        show-if-above
        :breakpoint="100"
        @mouseenter="miniDrawer=false"
        @mouseleave="miniDrawer=true">
        <div class="menu-level scrollbar">
          <a-menu mode="vertical" v-model="menu" style="width: 198px" @click="menuClick">
            <a-menu-item v-for="item in menuListLeft" :key="item.id">
              <div class="flex items-center font-16">
                <q-icon :name="`iconfont ${item.font}`" class="menu-icon"/>
                {{ item.name }}
              </div>
            </a-menu-item>
          </a-menu>
        </div>
      </q-drawer>
      <div class="sub-menu-wrapper"  :style="{width: fold ? '0' : '150px'}" v-if="subMenuList.length > 0">
        <div class="menu-info" :style="{padding: fold ? '0' : ''}">
          <div class="title-name">
            {{ subName }}
          </div>
          <div class="sub-menu scrollbar" >
            <a-menu v-model="subMenu" mode="inline" style="width: 150px" @click="subMenuClick">
              <a-menu-item v-for="item in subMenuList" :key="item.link">
                {{ getMenuName(item) }}
              </a-menu-item>
            </a-menu>
            <div v-if="showDoc" class="flex content-box items-center" @click="goDoc">
              <div class="icon-wrapper">
                <div class="icon-wrapper flex items-center justify-center">
                  <q-icon class="icon" name="iconfont icontubiao-63"/>
                </div>
              </div>
              <div>操作手册</div>
            </div>
          </div>
        </div>
        <div class="fold flex items-center justify-center" @click="toggleHide">
          <q-icon :name="fold?'iconfont icontubiao-43':'iconfont icontubiao-44'"/>
        </div>
      </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { menuListData } from '../../assets/js/menu-list'
import _ from 'lodash'

export default {
  name: 'LayoutMenu',
  props: {
    basicDataMenu: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      miniDrawer: true,
      fold: false,
      menuList: [],
      menu: [],
      subMenuList: [],
      subMenu: [],
      subDefaultMenu: [],
      subName: '',
      docUrl: {
        '状态监控': 'https://yzwl.yuque.com/staff-spvszt/nrwgft',
        'DNC': 'https://yzwl.yuque.com/staff-spvszt/gnnbic',
        '生产执行': 'https://yzwl.yuque.com/staff-spvszt/spdul4',
        '设备保全': 'https://yzwl.yuque.com/staff-spvszt/it6xlp',
        '刀具管理': 'https://yzwl.yuque.com/staff-spvszt/cesz0m',
        '库存管理': 'https://yzwl.yuque.com/staff-spvszt/zfqk4d',
        '工具管理': 'https://yzwl.yuque.com/staff-spvszt/tdro8q',
        '能耗管理': 'https://yzwl.yuque.com/staff-spvszt/nl0nxm',
        '机器联网': 'https://yzwl.yuque.com/staff-spvszt/mlvgcc'
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'permissions',
      'statusList'
    ]),
    menuListLeft () {
      return this.menuList.filter(item => {
        return Number(item.id) !== Number(this.Enums.SYS_PERMISSION.SYS_MENU.value) && Number(item.id) !== Number(this.Enums.SYS_PERMISSION.FACTORY_MENU.value)
      })
    },
    showDoc () {
      return !!this.docUrl[this.subName]
    }
  },
  watch: {
    subMenu: {
      deep: true,
      handler (val) {
        if (val?.length) {
          this.$router.push({ params: this.$route.params, query: this.$route.query, path: val[0] })
        }
      }
    },
    subMenuList: {
      deep: true,
      immediate: true,
      handler (val) {
        if (val.length === 0) {
          this.fold = true
          this.$emit('changeFold', true)
        } else {
          this.fold = false
          this.$emit('changeFold', false)
        }
      }
    },
    $route () {
      this.getCurrentRoute()
    }
  },
  created () {
    this.changeMenu()
    this.getCurrentRoute()
  },
  mounted () {
    this.saveCustomerSet()
  },
  methods: {
    ...mapActions([
      'saveCustomerSet'
    ]),
    getMenuName (data) {
      const name = _.replace(data.name, '停机', this.statusList[1].label)
      return name
    },
    // 菜单栏
    changeMenu () {
      const menuPage = Object.entries(this.Enums.SYS_PERMISSION)
        .filter(entry => entry[1].type === 'MENU_LEVEL_ONE' && this.permissions.indexOf(entry[1].value) > -1)
      const subMenuPage = Object.entries(this.Enums.SYS_PERMISSION)
        .filter(entry => entry[1].type === 'PAGE' && this.permissions.indexOf(entry[1].value) > -1)
      const menuList = []
      const menuData = _.cloneDeep(menuListData)
      menuPage.forEach(item => {
        // 获取一级菜单
        const menu = menuData.find(menu => menu.desc === item[1].name)
        // 获取一级菜单编号
        const parentId = item[1].value
        // 根据菜单编号筛选二级菜单
        const subListList = subMenuPage.filter(submenu => submenu[1].parentId === parentId)
        menu.children = subListList.map(item => {
          return menu.children.find(m => m.desc === item[1].name)
        })
        menuList.push(menu)
      })
      this.menuList = menuList
      this.$emit('changeMenuList', menuList)
    },
    getCurrentRoute () {
      this.menu = []
      const link = this.$route.path
      const currentMenu = this.menuList.find(item => {
        return item.children.findIndex(child => child.link === link) > -1
      })
      if (currentMenu) {
        if (currentMenu.desc === this.Enums.SYS_PERMISSION.FACTORY_MENU.name) {
          if (link.indexOf('message-set') > -1 || link.indexOf('mine-message') > -1) {
            this.subMenuList = currentMenu.children.filter(item => {
              return item.desc === this.Enums.SYS_PERMISSION.MINE_MESSAGE_PAGE.name || item.desc === this.Enums.SYS_PERMISSION.MESSAGE_SET_PAGE.name
            })
          } else {
            this.subMenuList = currentMenu.children.filter(item => {
              return item.desc !== this.Enums.SYS_PERMISSION.MINE_MESSAGE_PAGE.name && item.desc !== this.Enums.SYS_PERMISSION.MESSAGE_SET_PAGE.name
            })
          }
        } else {
          let subMenuList = currentMenu.children
          // process.env.COMPILE_ENV === 'test' && this.userInfo.tenant_id !== '1231749700063993858' && (subMenuList = _.cloneDeep(subMenuList).filter(v => v.id !== 183))
          this.subMenuList = subMenuList
        }
        this.subName = currentMenu.name
        this.subMenu = [link]
      } else {
        this.subMenuList = []
      }
    },
    toggleHide () {
      this.fold = !this.fold
      this.$emit('changeFold', this.fold)
    },
    menuClick (e) {
      const { key } = e
      const menuListInfo = this.menuList.find(item => item.id === key)
      this.miniDrawer = true
      this.subMenuList = menuListInfo.children
      this.subName = menuListInfo.name
      this.subMenu = [this.subMenuList[0].link]
    },
    setBasicSubMenu (menuLink, menuId, isMessage = false) {
      this.menu = []
      const menuListInfo = this.menuList.find(item => Number(item.id) === menuId)
      if (menuId === Number(this.Enums.SYS_PERMISSION.FACTORY_MENU.value)) {
        if (isMessage) {
          this.subMenuList = menuListInfo.children.filter(item => {
            return item.desc === this.Enums.SYS_PERMISSION.MINE_MESSAGE_PAGE.name || item.desc === this.Enums.SYS_PERMISSION.MESSAGE_SET_PAGE.name
          })
        } else {
          this.subMenuList = menuListInfo.children.filter(item => {
            return item.desc !== this.Enums.SYS_PERMISSION.MINE_MESSAGE_PAGE.name && item.desc !== this.Enums.SYS_PERMISSION.MESSAGE_SET_PAGE.name
          })
        }
      } else {
        this.subMenuList = menuListInfo.children
      }
      this.subName = menuListInfo.name
      this.subMenu = [menuLink]
    },
    subMenuClick (e) {
      this.subMenu = [e.key]
    },
    goDoc () {
      const url = this.docUrl[this.subName]
      if (url) {
        window.open(url, '_blank')
      }
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, .ant-menu-submenu-title:hover, .ant-menu-item-selected{
  color: #5f77fd;
}
.menu-level /deep/.ant-menu-item:hover{
  background-color: #F0F2FF;
}
/deep/.ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after{
  border-right: 3px solid #5f77fd;
}
.menu-level /deep/.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background: #5f77fd;
  color: #FFFFFF;
}
/deep/.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background: #F0F2FF;
}
/deep/.q-drawer-container:not(.q-drawer--mini-animate) .q-drawer--mini {
  width: 48px!important;
}
/deep/.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left{
  border-right: none;
}

.menu-icon{
  margin-right: 16px;
}

.sub-menu-wrapper {
  transition: all 300ms ease-in;
  background: #ffffff;
  position: absolute;
  left: 48px;
  height: 100%;
  z-index: 999;
  width: 150px;

  .menu-info{
    margin-top: 50px;
    height: calc(100% - 50px);
    position: relative;
    overflow: hidden;

    .content-box{
      position: absolute;
      bottom: 0;
      width: 150px;
      height: 50px;
      background: rgba(95, 119, 253, 0.05);
      border-radius: 6px;
      padding: 0 12px;
      font-size: 14px;
      font-weight: 500;
      color: #5F77FD;
      cursor: pointer;

      .icon-wrapper {
        margin-right: 6px;
        width: 24px;
        height: 24px;
        background: rgba(95, 119, 253, 0.1);
        border-radius: 4px;

        .icon{
          font-size: 16px;
        }
      }
    }

    .title-name {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      margin: 0 20px;
      line-height: 3;
      border-bottom: 1px solid #d3d3d3;
      white-space: nowrap;
      height: 49px;
    }
  }
  .fold {
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    height: 80px;
    position: absolute;
    width: 12px;
    right: -12px;
    top: calc(50% - 40px);
    background: #ffffff;
  }
}

.sub-menu,
.menu-level{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
